<template>
    <div class="tabbar_body">
        <div class="logo">
            <el-image style="" :src="url" fit="fit" />
        </div>
        <div class="main">
            <div class="left">
                <router-link :to="item.path" v-for="item in list" :key="item.id" :class="navColor"
                    @click=""
                    :style="{ color: item.id === tabbarStore.tabIndex ? color : '#000' }">
                    {{ item.name }}
                </router-link>

            </div>
            <div class="right">
                <el-button type="primary" v-if="tabbarStore.page === 'store'"
                    @click="router.push('/page/house'); tabbarStore.setPage('house')"
                    style="background-color: #C51C1E;">全屋定制</el-button>
                <el-button type="primary" v-else="tabbarStore.page === 'house'"
                    @click="router.push('/page/store'); tabbarStore.setPage('store')"
                    style="background-color: #54BAC9;">整店系列</el-button>
            </div>
        </div>
        <div class="mine">
            <div class="seach">
                <el-image style="height: 14px;" :src="navImg?.background?.seach" fit="fit" />
                <input type="text" placeholder="你在找什么">
                <el-button type="primary" round style="background-color: #54BAC9;"
                    v-if="tabbarStore.page === 'store'"   @click="router.push('/page/search');" class="pointer" >搜索</el-button>
                <el-button type="primary" round style="background-color: #C51C1E;"
                    v-else="tabbarStore.page === 'house'"  @click="router.push('/page/search')"  class="pointer" >搜索</el-button>
            </div>
            <div class="tx pointer" @click="router.push('mine')" >2194</div>
            <el-image style="height:20px" :src="navImg?.background?.collection" :fit="'fill'" @click="router.push('/page/mine/collection')"  class="pointer" />
            <el-image style="height:20px" :src="navImg?.background?.cart" :fit="'fill'" @click="router.push('/page/car')"   class="pointer"/>
        </div>
    </div>
</template>


<script setup lang="ts">
import { onMounted, ref , watchEffect, computed } from 'vue';
import { getNav, getTabbar } from '../apis/apis';
import { useTabbarStore } from '@/stores/TabbarStore'
const tabbarStore = useTabbarStore()
import { useRouter } from 'vue-router'
const router = useRouter()
const navImg: any = ref({})
const url = ref('')
const list = ref<any>([])
const page = ref(false)
let res: any = {}
const color = ref('#54BAC9')
const navColor = computed(() => {
    return {
        storeHover: page.value,
        hoverHover: !page.value
    }
})


onMounted(async () => {

    console.log(location.href.indexOf('store'));

    try {
        navImg.value = await getNav()
        // console.log(navImg.value);
        url.value = navImg.value.login.imageUrl
        res = await getTabbar()
        watchEffect(async () => {
            if (tabbarStore.page === 'store') {
                list.value = res.store
                page.value = false
                color.value = '#54BAC9'
            } else {
                list.value = res.house
                page.value = true
                color.value = '#C51C1E'
            }
            // console.log(list.value);
        })

    } catch (error) {

    }
})

</script>


<style scoped lang="scss">
a {
    text-decoration: none;
    color: #000;
}
.pointer{
    cursor: pointer;
}
.storeHover:hover {
    color: #C51C1E;
}

.hoverHover:hover {
    color: #54BAC9;
}

.tabbar_body {
    width: 1300px;
    display: flex;
    margin: 46px auto;
    justify-content: space-between;
    align-items: center;

    & .logo {}

    & .main {
        display: flex;
        margin: 0 20px;
        justify-content: space-between;
        flex: 1;

        & .left {
            flex: 1;

            & a {
                font-weight: bold;
                font-size: 14px;
                margin-right: 20px;
            }

        }

        & .right {
            & .el-button {
                color: #fff;
                background-color: #C51C1E;
                border: none;
                outline: none;
                font-size: 12px;
                height: 28px;
                padding: 0px 10px;
                border-radius: 8px;
            }
        }

    }

    & .mine {
        display: flex;
        align-items: center;

        &>div:not(:last-child) {
            margin-right: 20px;
        }

        & .seach {
            display: flex;
            align-items: center;
            width: 240px;
            height: 40px;
            background-color: #E9E9E9;
            border-radius: 100px;
            vertical-align: middle;

            & .el-image {
                vertical-align: middle;
                margin-right: 4px;
                margin-left: 20px;
            }

            & input {
                font-size: 12px;
                border: none;
                outline: none;
                background-color: transparent;
                line-height: 40px;
            }

            & .el-button {
                height: 100%;
                background-color: #54BAC9;
                border: none;
                outline: none;
                margin: 0px;
            }
        }

        & .tx {
            background-color: #329DAC;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            line-height: 40px;
            overflow: hidden;
            font-weight: bold;
            color: #fff;
        }
    }
}
</style>